<template>
  <div ref="chartRef" class="mini-chart"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  color: {
    type: String,
    default: '#409EFF'
  }
})

const chartRef = ref(null)
let chart = null

const initChart = () => {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value)
    updateChart()
  }
}

const updateChart = () => {
  if (chart) {
    const option = {
      grid: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      },
      xAxis: {
        type: 'category',
        show: false,
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        show: false
      },
      series: [{
        data: props.data,
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: props.color
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: props.color
          }, {
            offset: 1,
            color: 'rgba(255,255,255,0.1)'
          }])
        }
      }]
    }
    chart.setOption(option)
  }
}

watch(() => props.data, () => {
  updateChart()
}, { deep: true })

watch(() => props.color, () => {
  updateChart()
})

onMounted(() => {
  initChart()
  window.addEventListener('resize', () => {
    chart && chart.resize()
  })
})

onUnmounted(() => {
  chart && chart.dispose()
})
</script>

<style scoped>
.mini-chart {
  width: 100%;
  height: 100%;
}
</style> 